import React,{useState,useEffect,useMemo,useRef} from 'react'
import {NavBar,Divider,Cell, InputNumber, ConfigProvider} from '@nutui/nutui-react'
import {ArrowLeft, People} from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import '../css/yuding.css'
import axios from 'axios'

export default function Yuding() {
    let navigate = useNavigate()
    let oForm = useRef() //获取表单
    let _id = decodeURIComponent(window.location.search.split('=')[1].split('&')[0])
    let piao = decodeURIComponent(window.location.search.split('=')[2].split('&')[0])
    let type = decodeURIComponent(window.location.search.split('=')[3].split('&')[0])
    let name =  decodeURIComponent(window.location.search.split('=')[4].split('&')[0])
    let price = decodeURIComponent(window.location.search.split('=')[5].split('&')[0])
    let [num,setNum] = useState(1)
    let [active,setActive] = useState(0)
    let gaiNum = useMemo(()=>{
      return price = num*price
    },[num])
    let [youke,setYouke] = useState([
      {name:'杨某某',phone:'13930847328',id:'440106199909092345'},
      {name:'李某某',phone:'13930847329',id:'440106199909092346'},
      {name:'王某某',phone:'13930847330',id:'440106199909092347'}
    ])
    let addZhifu = ()=>{
      axios.post('http://localhost:3000/addZhiFu',{name:name,price:price,num:num,type:piao+type,people:youke[active].name}).then(res=>{
        if(res.data.code == 200){
          axios.post('http://localhost:3000/alipay',{name:name,price:price}).then(res=>{
                oForm.current.innerHTML = res.data;
                //自动调用form表单 document.forms 获取当前页面所有的表单集合
                document.forms[0].submit()
          })
        }
      })
    }
  return (
    <div className='box'>
        <NavBar
        back={
          <>
            <ArrowLeft  />
          </>
        }
        onBackClick={(e) => navigate(-1)}
      style={{marginBottom:'0'}} >
        预订
      </NavBar>
      <div ref={oForm}></div>
      <div className="main">
        <h2>{name} - {type}{piao}</h2>
        <Divider style={{ borderStyle: 'dashed' }} />
        <h2>景区门票价格</h2>
        <span style={{color:'orange',fontSize:'18px',fontWeight:'bold',verticalAlign:'top'}}>￥{gaiNum}</span> <br />
        <span style={{color:'grey',fontSize:'10px'}}>注:门票价格最终解释权归当地景区所持</span>
        <Divider style={{ borderStyle: 'dashed' }} />
        <h2>选择数量</h2>
        <ConfigProvider>
          <InputNumber defaultValue={num} value={num} onChange={(e)=>setNum(e)} max={5} />
        </ConfigProvider>
        <h2>游客信息</h2>
        {youke.map((item,index)=>{
          return <div className="item" key={index} id={active===index?'active':''} onClick={()=>{setActive(index)}}>{item.name}</div>
        })}
        <p style={{margin:'10px 0'}}>姓名  {youke[active].name}</p>
        <p style={{margin:'10px 0'}}>身份证 {youke[active].id} </p>
        <p style={{margin:'10px 0'}}>手机号 {youke[active].phone}</p>
      </div>
      <div className="footer">
        总价 <span style={{color:'orange',fontSize:'18px',fontWeight:'bold',verticalAlign:'top'}}>￥{gaiNum}</span>
        <button onClick={()=>{addZhifu()}}>提交订单</button>
      </div>
    </div>
  )
}
